<template>
	<el-form ref="loginFormRef" :model="state.ruleForm" size="large" class="login-content-form theme-chemical">
		<el-form-item class="login-animation1">
			<el-input v-model="state.ruleForm.Mobile" :placeholder="'请输入手机号'" clearable autocomplete="off" class="login-input">
				<template #prefix>
					<el-icon class="input-icon">
						<el-icon>
							<Service />
						</el-icon>
					</el-icon>
				</template>
			</el-input>
		</el-form-item>

		<el-form-item class="login-animation2">
			<div class="verification-code">
				<el-input
					v-model="state.ruleForm.Code"
					:placeholder="'请输入验证码'"
					clearable
					autocomplete="off"
					class="login-input"
					@keyup.enter="onSignIn"
				>
					<template #prefix>
						<el-icon class="input-icon">
							<Key />
						</el-icon>
					</template>
				</el-input>
				<el-button :disabled="state.countdown > 0" @click="getVerificationCode" class="code-button">
					{{ state.countdown > 0 ? `${state.countdown}s` : '获取验证码' }}
				</el-button>
			</div>
		</el-form-item>

		<el-form-item class="login-animation3">
			<el-button type="primary" class="login-content-submit" :loading="state.loading.signIn" @click="onSignIn" size="large">
				<span v-if="!state.loading.signIn">登录</span>
				<span v-else>正在验证...</span>
			</el-button>
		</el-form-item>
	</el-form>
</template>

<script setup lang="ts" name="loginPhone">
import { reactive, ref, getCurrentInstance, onMounted } from 'vue';
import { Service, Key } from '@element-plus/icons-vue';
import ElMessage from 'element-plus/es/components/message/index';
import useLoginApi from '/@/api/login';
import { useLogin } from '/@/hooks/useLogin';

// 定义事件
const emit = defineEmits(['loading-change']);

// 定义变量内容
const loginFormRef = ref();
const loginApi = useLoginApi();
const ci = getCurrentInstance() as any;
const { handleLoginSuccess } = useLogin(ci);

const state = reactive({
	ruleForm: {
		Mobile: '',
		Code: '',
	},
	loading: {
		signIn: false,
	},
	countdown: 0,
});

// 保存倒计时状态到localStorage
const saveCountdownState = (mobile: string, endTime: number) => {
	localStorage.setItem(
		'smsCountdown',
		JSON.stringify({
			mobile,
			endTime,
		})
	);
};

// 从localStorage恢复倒计时状态
const restoreCountdownState = () => {
	const savedState = localStorage.getItem('smsCountdown');
	if (savedState) {
		const { mobile, endTime } = JSON.parse(savedState);
		const now = Date.now();
		if (now < endTime) {
			state.ruleForm.Mobile = mobile;
			state.countdown = Math.ceil((endTime - now) / 1000);
			const timer = setInterval(() => {
				state.countdown--;
				if (state.countdown <= 0) {
					clearInterval(timer);
					localStorage.removeItem('smsCountdown');
				}
			}, 1000);
		} else {
			localStorage.removeItem('smsCountdown');
		}
	}
};

// 获取验证码
const getVerificationCode = async () => {
	if (!state.ruleForm.Mobile) {
		ElMessage.warning('请输入手机号');
		return;
	}
	if (!/^1[3-9]\d{9}$/.test(state.ruleForm.Mobile)) {
		ElMessage.warning('请输入正确的手机号');
		return;
	}
	try {
		await loginApi.sendVerificationCode(state.ruleForm.Mobile, 'login').then((res) => {
			if (res.Code === 200) {
				ElMessage.success('验证码已发送');
				state.countdown = 60;
				const endTime = Date.now() + state.countdown * 1000;
				saveCountdownState(state.ruleForm.Mobile, endTime);
				const timer = setInterval(() => {
					state.countdown--;
					if (state.countdown <= 0) {
						clearInterval(timer);
						localStorage.removeItem('smsCountdown');
					}
				}, 1000);
			} else {
				ElMessage.error(res.Message);
			}
		});
		const timer = setInterval(() => {
			state.countdown--;
			if (state.countdown <= 0) {
				clearInterval(timer);
				localStorage.removeItem('smsCountdown');
			}
		}, 1000);
	} catch (error) {
		ElMessage.error('发送验证码失败，请稍后重试');
	}
};

// 在组件挂载时恢复倒计时状态
onMounted(() => {
	restoreCountdownState();
});

// 登录
const onSignIn = async () => {
	if (!state.ruleForm.Mobile || !state.ruleForm.Code) {
		ElMessage.warning('请输入手机号和验证码');
		return;
	}

	state.loading.signIn = true;
	emit('loading-change', true);

	try {
		const res = await loginApi.signInByPhone(state.ruleForm);
		if (res.Code === 200) {
			await handleLoginSuccess(res.Data.access_token, emit);
		} else {
			ElMessage.error(res.Message);
		}
	} catch (error) {
		console.log(error, 'error');
	} finally {
		state.loading.signIn = false;
		emit('loading-change', false);
	}
};
</script>

<style scoped>
/* 基于 account.vue 的输入框修复样式 */

/* 登录表单容器 */
.login-content-form {
	width: 100%;
}

/* 表单项样式 */
.login-content-form .el-form-item {
	margin-bottom: 1.5rem;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.login-content-form .el-form-item__content {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* 验证码输入框容器 */
.verification-code {
	display: flex;
	gap: 12px;
	align-items: center;
}

.verification-code .login-input {
	flex: 1;
}

.code-button {
	height: 56px;
	padding: 0 20px;
	font-size: 14px;
	font-weight: 500;
	border-radius: 12px;
	background: #1e40af;
	border: 2px solid #1e40af;
	color: white;
	transition: all 0.3s ease;
	white-space: nowrap;
	min-width: 120px;
}

.code-button:hover {
	background: #1e3a8a;
	border-color: #1e3a8a;
	transform: translateY(-1px);
}

.code-button:disabled {
	background: #9ca3af;
	border-color: #9ca3af;
	cursor: not-allowed;
	transform: none;
}

/* 输入框样式 - 基于 account.vue 的成功方案 */
.login-input {
	height: 56px;
	position: relative;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: 100% !important;
}

.login-input :deep(.el-input) {
	height: 56px;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: 100% !important;
}

.login-input :deep(.el-input__wrapper) {
	width: 100% !important;
	height: 56px !important;
	background: #ffffff !important;
	border: 2px solid #e5e7eb !important;
	border-radius: 12px !important;
	padding: 0 20px 0 55px !important;
	transition: all 0.3s ease !important;
	box-shadow: none !important;
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: relative !important;
}

.login-input :deep(.el-input__wrapper):hover {
	border-color: #1e40af !important;
	transform: translateY(-1px);
}

.login-input :deep(.el-input__wrapper.is-focus) {
	outline: none !important;
	border-color: #1e40af !important;
	box-shadow: 0 0 0 4px rgba(30, 64, 175, 0.1) !important;
}

/* 输入框内部文字样式 - 强制修复 */
.login-input :deep(.el-input__inner) {
	width: 100% !important;
	height: 52px !important;
	background: transparent !important;
	border: none !important;
	color: #1f2937 !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	transition: all 0.3s ease !important;
	outline: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	line-height: 52px !important;
}

.login-input :deep(.el-input__inner)::placeholder {
	color: #9ca3af !important;
	font-weight: 400 !important;
}

.login-input :deep(.el-input__inner):focus {
	color: #1f2937 !important;
}

/* 强制修复所有可能的文字颜色问题 */
.login-input :deep(.el-input__inner),
.login-input :deep(.el-input__inner):focus,
.login-input :deep(.el-input__inner):active,
.login-input :deep(.el-input__inner):hover,
.login-input :deep(.el-input__inner):valid,
.login-input :deep(.el-input__inner):invalid,
.login-input :deep(.el-input__inner):not(:placeholder-shown) {
	color: #1f2937 !important;
	background: transparent !important;
}

/* 覆盖任何白色文字样式 */
.login-input :deep(.el-input__inner[style*='color: white']),
.login-input :deep(.el-input__inner[style*='color: #fff']),
.login-input :deep(.el-input__inner[style*='color: #ffffff']) {
	color: #1f2937 !important;
}

/* 自动填充样式修复 */
.login-input :deep(.el-input__inner:-webkit-autofill),
.login-input :deep(.el-input__inner:-webkit-autofill:hover),
.login-input :deep(.el-input__inner:-webkit-autofill:focus),
.login-input :deep(.el-input__inner:-webkit-autofill:active) {
	-webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
	-webkit-text-fill-color: #1f2937 !important;
	transition: background-color 5000s ease-in-out 0s !important;
	color: #1f2937 !important;
	font-weight: 500 !important;
	font-size: 14px !important;
}

/* 前缀图标样式 - 修复图标显示问题 */
.login-input :deep(.el-input__prefix) {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding-right: 12px !important;
	left: 12px !important;
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 10 !important;
	width: 40px !important;
	height: 40px !important;
}

.login-input :deep(.el-input__prefix .el-icon) {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #6b7280 !important;
	font-size: 18px !important;
	transition: all 0.3s ease !important;
	width: 20px !important;
	height: 20px !important;
}

.login-input :deep(.el-input__prefix .input-icon) {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #6b7280 !important;
	font-size: 18px !important;
	transition: all 0.3s ease !important;
	width: 20px !important;
	height: 20px !important;
}

.login-input:focus-within :deep(.el-input__prefix .el-icon),
.login-input:focus-within :deep(.el-input__prefix .input-icon) {
	color: #1e40af !important;
	transform: scale(1.05);
}

/* 后缀图标样式 - 修复清除和密码显示按钮 */
.login-input :deep(.el-input__suffix) {
	position: absolute !important;
	right: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 10 !important;
	height: 40px !important;
}

.login-input :deep(.el-input__suffix-inner) {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
}

.login-input :deep(.el-input__suffix-inner .el-input__clear),
.login-input :deep(.el-input__suffix-inner .el-input__password) {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #6b7280 !important;
	font-size: 16px !important;
	transition: all 0.3s ease !important;
	cursor: pointer !important;
	width: 20px !important;
	height: 20px !important;
	border-radius: 4px !important;
	background: transparent !important;
	border: none !important;
}

.login-input :deep(.el-input__suffix-inner .el-input__clear):hover,
.login-input :deep(.el-input__suffix-inner .el-input__password):hover {
	color: #1e40af !important;
	background: rgba(30, 64, 175, 0.1) !important;
	transform: scale(1.1);
}

/* 修复Element Plus图标组件 */
.login-input :deep(.el-input__suffix-inner .el-icon) {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #6b7280 !important;
	font-size: 16px !important;
	transition: all 0.3s ease !important;
	cursor: pointer !important;
	width: 20px !important;
	height: 20px !important;
	border-radius: 4px !important;
}

.login-input :deep(.el-input__suffix-inner .el-icon):hover {
	color: #1e40af !important;
	background: rgba(30, 64, 175, 0.1) !important;
	transform: scale(1.1);
}

/* 登录按钮样式 */
.login-content-submit {
	width: 100%;
	height: 56px;
	font-size: 0.9rem;
	font-weight: 700;
	border-radius: 12px;
	background: linear-gradient(135deg, #1e40af 0%, #059669 100%);
	border: 2px solid #1e40af;
	color: white !important;
	box-shadow:
		0 10px 15px -3px rgba(0, 0, 0, 0.1),
		0 4px 6px -2px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
	margin-top: 1rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
}

.login-content-submit:hover {
	background: linear-gradient(135deg, #1e3a8a 0%, #059669 100%);
	transform: translateY(-2px);
	box-shadow:
		0 20px 25px -5px rgba(0, 0, 0, 0.1),
		0 10px 10px -5px rgba(0, 0, 0, 0.04);
	border-color: #1e3a8a;
}

.login-content-submit:active {
	transform: translateY(-1px);
}

.login-content-submit.is-loading {
	background: #9ca3af;
	border-color: #9ca3af;
	cursor: not-allowed;
	transform: none;
}

.login-content-submit.is-loading:hover {
	background: #9ca3af;
	transform: none;
	box-shadow:
		0 10px 15px -3px rgba(0, 0, 0, 0.1),
		0 4px 6px -2px rgba(0, 0, 0, 0.05);
	border-color: #9ca3af;
}

/* 动画效果 */
.login-animation1 {
	animation: slideInUp 0.6s ease-out;
}

.login-animation2 {
	animation: slideInUp 0.6s ease-out 0.1s both;
}

.login-animation3 {
	animation: slideInUp 0.6s ease-out 0.2s both;
}

@keyframes slideInUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 暗黑模式支持 */
[data-theme='dark'] .login-input :deep(.el-input__wrapper) {
	background: #1e293b !important;
	border-color: #475569 !important;
}

[data-theme='dark'] .login-input :deep(.el-input__inner) {
	color: #f9fafb !important;
}

[data-theme='dark'] .login-input :deep(.el-input__inner)::placeholder {
	color: #6b7280 !important;
}

[data-theme='dark'] .login-input :deep(.el-input__prefix .el-icon),
[data-theme='dark'] .login-input :deep(.el-input__prefix .input-icon) {
	color: #9ca3af !important;
}

[data-theme='dark'] .login-input:focus-within :deep(.el-input__prefix .el-icon),
[data-theme='dark'] .login-input:focus-within :deep(.el-input__prefix .input-icon) {
	color: #3b82f6 !important;
}

[data-theme='dark'] .login-input :deep(.el-input__suffix-inner .el-input__clear),
[data-theme='dark'] .login-input :deep(.el-input__suffix-inner .el-input__password),
[data-theme='dark'] .login-input :deep(.el-input__suffix-inner .el-icon) {
	color: #9ca3af !important;
}

[data-theme='dark'] .login-input :deep(.el-input__suffix-inner .el-input__clear):hover,
[data-theme='dark'] .login-input :deep(.el-input__suffix-inner .el-input__password):hover,
[data-theme='dark'] .login-input :deep(.el-input__suffix-inner .el-icon):hover {
	color: #3b82f6 !important;
	background: rgba(59, 130, 246, 0.1) !important;
}

[data-theme='dark'] .login-input :deep(.el-input__inner:-webkit-autofill),
[data-theme='dark'] .login-input :deep(.el-input__inner:-webkit-autofill:hover),
[data-theme='dark'] .login-input :deep(.el-input__inner:-webkit-autofill:focus),
[data-theme='dark'] .login-input :deep(.el-input__inner:-webkit-autofill:active) {
	-webkit-box-shadow: 0 0 0 1000px #1e293b inset !important;
	-webkit-text-fill-color: #f9fafb !important;
}

[data-theme='dark'] .code-button {
	background: #3b82f6;
	border-color: #3b82f6;
}

[data-theme='dark'] .code-button:hover {
	background: #2563eb;
	border-color: #2563eb;
}
</style>
